<div class="body-container">
    <div class="app-header">
        <div class="app-name">{{'APP_NAME'|translate}}</div>
        <div style="display: flex; justify-content: center; align-items: center;">
            <div style="font-weight: 600; margin-right: 16px; margin-top: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer;"
                (click)="openDoc()">
                <div>{{'APP_DOC'|translate}}</div><mat-icon
                    style="padding-left:4px;font-size: 16px; width: 16px;height: 16px;">open_in_new</mat-icon>
            </div>
            <div style="font-weight: 600; margin-right: 16px; margin-top: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer;"
                (click)="openSource()">
                <div>{{'SOURCE_CODE_REPO'|translate}}</div><mat-icon
                    style="padding-left:4px;font-size: 16px; width: 16px;height: 16px;">open_in_new</mat-icon>
            </div>
            <div (click)="langSvc.toggleLang()"
                style="cursor: pointer; text-align: right;margin-top: 8px;margin-right: 8px;">
                {{'CURRENT_LANG' | translate}}</div>
        </div>
    </div>
    <div class="app-body">
        <div class="app-msg-body">
            <div style="font-size: 24px; margin-bottom: 16px;">{{'APP_DESCRIPTION_1'|translate}}</div>
            <div class="app-msg">{{'APP_DESCRIPTION_2'|translate}}</div>
        </div>
        <ng-container *ngIf="context === 'LOGIN'">
            <form [formGroup]="loginForm" class="page-form">
                <div class="form-body mobile-view">
                    <div class="login-msg">
                        <div>{{'USER_LOGIN'|translate}}</div>
                    </div>
                    <div class="register-login-msg">
                        <div>{{'NEW_USER_MSG_2'|translate}}</div>
                        <a class="register-login-msg-link" (click)="context='REGISTER'">{{'REGISTER'| translate}}</a>
                    </div>
                    <div class="register-email">
                        <mat-form-field style="flex: 1;">
                            <mat-label>{{'ENTER_YOUR_EMAIL' | translate}}</mat-label>
                            <input matInput formControlName="email" autocomplete="username" name="username">
                            <mat-error>{{loginEmailErrorMsg | translate}}</mat-error>
                        </mat-form-field>
                    </div>
                    <div class="register-email">
                        <mat-form-field style="flex: 1;">
                            <input matInput placeholder="{{ 'ENTER_YOUR_PASSWORD'| translate}}" [type]="'password'"
                                formControlName="pwd" autocomplete="current-password">
                            <mat-error>{{loginPwdErrorMsg | translate}}</mat-error>
                        </mat-form-field>
                        <button mat-raised-button (click)="login()" style="margin-left: 8px;" color="primary">{{'LOGIN'|
                            translate}}</button>
                    </div>
                    <div class="forget-pwd-msg">
                        <a (click)="context='FORGET'" class="forget-pwd">{{'FORGET_PASSWORD'| translate}}</a>
                    </div>
                </div>
            </form>
        </ng-container>
        <ng-container *ngIf="context === 'REGISTER'">
            <form [formGroup]="registerForm" class="page-form">
                <div class="form-body mobile-view">
                    <div class="register-msg">
                        {{'NEW_USER_MSG'|translate}}
                    </div>
                    <div class="register-login-msg">
                        <div>{{'NEW_USER_MSG_1'|translate}}</div>
                        <a class="register-login-msg-link" (click)="context='LOGIN'">{{'LOGIN'| translate}}</a>
                    </div>
                    <div class="register-email">
                        <mat-form-field style="flex: 1;">
                            <mat-label>{{'ENTER_YOUR_EMAIL' | translate}}</mat-label>
                            <input matInput formControlName="email" name="email">
                            <mat-error>{{registerEmailErrorMsg | translate}}</mat-error>
                        </mat-form-field>
                        <button class="register-email-btn" mat-raised-button (click)="getCode()"
                            color="primary">{{'GET_ACTIVATION_CODE'| translate}}</button>
                    </div>
                    <mat-form-field>
                        <mat-label>{{'ACTIVATION_CODE'| translate}}</mat-label>
                        <input matInput formControlName="activationCode">
                        <mat-hint>{{'ACTIVATION_CODE_HINT'|translate}}</mat-hint>
                        <mat-error>{{registerCodeErrorMsg | translate}}</mat-error>
                    </mat-form-field>
                    <div style="display: flex; flex-direction: row;">
                        <mat-form-field style="margin-right: 8px; width: 100px;">
                            <mat-label>{{'COUNTRY_CODE'|translate}}</mat-label>
                            <mat-select formControlName="countryCode">
                                <mat-option *ngFor="let e of mobileNums" [value]="e.value">
                                    {{e.label}}
                                </mat-option>
                            </mat-select>
                            <mat-error>{{registerMobileCountryCodeErrorMsg | translate}}</mat-error>
                        </mat-form-field>
                        <mat-form-field>
                            <mat-label>{{'MOBILE_NUMBER'|translate}}</mat-label>
                            <input matInput [type]="'text'" formControlName="mobileNumber">
                            <mat-error>{{registerMobilePhoneNumErrorMsg | translate}}</mat-error>
                        </mat-form-field>
                    </div>
                    <mat-form-field>
                        <!-- chrome password manager fix, chrome will try to put email into this user invisible field -->
                        <input type="text" style="height: 0; width: 0; position: absolute; left: -1000px; top: -1000px;"
                            autocomplete="username">
                        <input matInput placeholder="{{ 'ENTER_YOUR_PASSWORD'| translate}}" [type]="'password'"
                            formControlName="pwd" autocomplete="new-password">
                        <mat-error>{{pwdErrorMsg | translate}}</mat-error>
                    </mat-form-field>
                    <mat-form-field>
                        <input matInput placeholder="{{'CONFIRM_YOUR_PASSWORD'| translate}}" [type]="'password'"
                            formControlName="confirmPwd" autocomplete="new-password">
                        <mat-error>{{registerConfirmPwdErrorMsg | translate}}</mat-error>
                    </mat-form-field>

                    <ul *ngIf="showPasswordHint()" style="font-size: 12px; padding-left: 16px;">
                        <li>{{"PASSWORD_RULE_1"|translate}}</li>
                        <li>{{"PASSWORD_RULE_2"|translate}}</li>
                        <li>{{"PASSWORD_RULE_5"|translate}}</li>
                        <li>{{"PASSWORD_RULE_3"|translate}}</li>
                        <li>{{"PASSWORD_RULE_4"|translate}}</li>
                    </ul>
                    <button mat-raised-button (click)="register()" color="primary">{{'REGISTER'|
                        translate}}</button>
                </div>
            </form>
        </ng-container>
        <ng-container *ngIf="context === 'FORGET'">
            <form [formGroup]="forgetForm" class="page-form">
                <div class="form-body mobile-view">
                    <div class="register-msg">
                        {{'RESET_PWD'|translate}}
                    </div>
                    <div class="register-email">
                        <mat-form-field style="flex: 1;">
                            <mat-label>{{'ENTER_YOUR_EMAIL' | translate}}</mat-label>
                            <input matInput formControlName="email" autocomplete="username" name="username">
                            <mat-error>{{forgetEmailErrorMsg | translate}}</mat-error>
                        </mat-form-field>
                        <button class="register-email-btn" mat-raised-button (click)="getToken()"
                            color="primary">{{'GET_PASSWORD_RESET_TOKEN' | translate}}</button>
                    </div>
                    <mat-form-field>
                        <mat-label>{{'ENTER_PASSWORD_RESET_TOKEN'| translate}}</mat-label>
                        <input matInput [type]="'text'" formControlName="token">
                        <mat-hint>{{'ENTER_PASSWORD_RESET_TOKEN_HINT'|translate}}</mat-hint>
                        <mat-error>{{forgetTokenErrorMsg | translate}}</mat-error>
                    </mat-form-field>

                    <mat-form-field>
                        <!-- chrome password manager fix, chrome will try to put email into this user invisible field -->
                        <input type="text" style="height: 0; width: 0; position: absolute; left: -1000px; top: -1000px;"
                            autocomplete="username">
                        <input matInput placeholder="{{ 'ENTER_YOUR_NEW_PASSWORD'| translate}}" [type]="'password'"
                            formControlName="pwd" autocomplete="new-password">
                        <mat-error>{{forgetPwdErrorMsg | translate}}</mat-error>
                    </mat-form-field>
                    <mat-form-field>
                        <input matInput placeholder="{{'REENTER_YOUR_NEW_PASSWORD'| translate}}" [type]="'password'"
                            formControlName="confirmPwd" autocomplete="new-password">
                        <mat-error>{{forgetConfirmPwdErrorMsg | translate}}</mat-error>
                    </mat-form-field>
                    <ul *ngIf="showPasswordHint()" style="font-size: 12px; padding-left: 16px;">
                        <li>{{"PASSWORD_RULE_1"|translate}}</li>
                        <li>{{"PASSWORD_RULE_2"|translate}}</li>
                        <li>{{"PASSWORD_RULE_5"|translate}}</li>
                        <li>{{"PASSWORD_RULE_3"|translate}}</li>
                        <li>{{"PASSWORD_RULE_4"|translate}}</li>
                    </ul>
                    <button mat-raised-button (click)="changePassword()" color="primary">{{'CHANGE_PASSWORD'|
                        translate}}</button>
                    <div style="display: flex;justify-content: space-between;">
                        <a (click)="context='LOGIN'" class="forget-pwd">{{'GO_BACK_TO_LOGIN'| translate}}</a>
                    </div>
                </div>
            </form>
        </ng-container>

    </div>
</div>